<template>
  <div>
    <XxxxxxVue v-model="conditions1" :filtertype="filtertype" :deduplicationOptions="deduplicationOptions" :symbol="symbol"/>
    <div style="text-align: left">
      <el-radio v-model="relation" label="or">或</el-radio>
      <el-radio v-model="relation" label="and">并且</el-radio>
    </div>
    <XxxxxxVue v-model="conditions2" :filtertype="filtertype" :deduplicationOptions="deduplicationOptions"/>
    <button @click="onSubmit">确定</button>

    <div>
      <div v-for="item in tableData" :key="item.address">
        <!-- {{ item.address }} -->
        <!-- {{item.assetNo}} -->
        {{item.time}}
      </div>
    </div>
  </div>
</template>

<script>
import XxxxxxVue from "./xxxxxx.vue";
import { getTextResultMap, getNumberResultMap,getTimeResultMap } from "./utils";
import { ITypeEnums } from "./type";

export default {
  components: {
    XxxxxxVue,
  },
  props: {
    // 列表key
    filterKey: {
      type: String,
      default: "time",//address、assetNo、time
    },
    //  传过来的列表类型
    filtertype: {
      type: String,
      default: ITypeEnums.timeType, //textType、numberType、timeType
    },
    deduplicationOptions: {
      type: Array,
      default() {
        // return [{ label: "上海市1518弄方立鑫" }, { label: "1上海市1517弄" }];
        //  return [{ label: "5324" }, { label: "6632" }];
         return [{ label: "2024-01-18 00:00:00" }, { label: "2023-06-18 00:00:00" }];
      },
    },
  },
  data() {
    return {
      symbol:"equal",
      relation: "or",
      conditions1: { symbol: "", value: "" },
      conditions2: { symbol: "", value: "" },
      tableData: [
        {
          address: "上海市1518弄方立鑫",
          assetNo: "5324",
          time:"2024-01-18 00:00:00"
        },
        {
          address: "1上海市1517弄",
          assetNo: "6632",
          time:"2023-06-18 00:00:00"
        },
        // {
        //   address: "上海市方立鑫普陀区周瑾金沙江路 1519 弄",
        //   assetNo: "8747",
        // },
        // {
        //   address: "上海市普陀区金沙江路 1516 弄",
        //   assetNo: "8732",
        // },
      ],
    };
  },

  methods: {
    onSubmit() {
      if (
        !this.conditions1.symbol ||
        (!this.conditions1.symbol && this.conditions2.symbol)
      ) {
        this.$message({
          showClose: true,
          message: "筛选条件不能为空",
          type: "warning",
        });
        return;
      }
      if (
        (this.conditions1.symbol && !this.conditions1.value) ||
        (this.conditions2.symbol && !this.conditions2.value)
      ) {
        this.$message({
          showClose: true,
          message: "请先填写查询的值",
          type: "warning",
        });
        return;
      }
      console.log(this.filtertype);
      console.log(this.relation);
      if (this.filtertype == "text") {
        if (this.relation === "and") {
          const state = (node) =>
            getTextResultMap(
              node[this.filterKey],
              this.conditions1.symbol,
              this.conditions1.value
            ) &&
            getTextResultMap(
              node[this.filterKey],
              this.conditions2.symbol,
              this.conditions2.value
            );
          // 向上传递筛选后的参数，以便于页面数据变化
          // this.$emit("newTableData", this.tableData.filter(state));
          console.log(this.tableData.filter(state));
        } else if (this.relation === "or") {
          const state = (node) =>
            getTextResultMap(
              node[this.filterKey],
              this.conditions1.symbol,
              this.conditions1.value
            ) ||
            getTextResultMap(
              node[this.filterKey],
              this.conditions2.symbol,
              this.conditions2.value
            );
          // 3.点击确定的时候向上层传递返回的数据
          // this.$emit("newTableData", this.tableData.filter(state));
          console.log(this.tableData.filter(state));
        }
      } else if (this.filtertype == "number") {
        if (this.relation === "and") {
          const state = (node) =>
            getNumberResultMap(
              node[this.filterKey],
              this.conditions1.symbol,
              this.conditions1.value
            ) &&
            getNumberResultMap(
              node[this.filterKey],
              this.conditions2.symbol,
              this.conditions2.value
            );
          // this.$emit("newTableData", this.tableData.filter(state));
          console.log(this.tableData.filter(state));
        } else if (this.relation === "or") {
          const state = (node) =>
            getNumberResultMap(
              node[this.filterKey],
              this.conditions1.symbol,
              this.conditions1.value
            ) ||
            getNumberResultMap(
              node[this.filterKey],
              this.conditions2.symbol,
              this.conditions2.value
            );
          // this.$emit("newTableData", this.tableData.filter(state));
          console.log(this.tableData.filter(state));
        }
      } else if (this.filtertype == "time") {
        if (this.relation === "and") {
          const state = (node) =>
            getTimeResultMap(
              Date.parse(node[this.filterKey]),
              this.conditions1.symbol,
              Date.parse(this.conditions1.value)
            ) &&
            getTimeResultMap(
              Date.parse(node[this.filterKey]),
              this.conditions2.symbol,
              Date.parse(this.conditions2.value)
            );
          // 向上传递筛选后的参数，以便于页面数据变化
          // this.$emit("newTableData", this.tableData.filter(state));
          console.log(this.tableData.filter(state));
        } else if (this.relation === "or") {
          const state = (node) =>
            getTimeResultMap(
              Date.parse(node[this.filterKey]),
              this.conditions1.symbol,
              Date.parse(this.conditions1.value)
            ) ||
            getTimeResultMap(
              Date.parse(node[this.filterKey]),
              this.conditions2.symbol,
              Date.parse(this.conditions2.value)
            );
          // 3.点击确定的时候向上层传递返回的数据
          // this.$emit("newTableData", this.tableData.filter(state));
          console.log(this.tableData.filter(state));
        }
      }
    },
  },
};
</script>


